<template>
  <div class="person">
    <h2>一辆{{car.brand}}车，价值{{ car.price }}元</h2>
    <button @click="changeCarPrice">点击修改车价</button>
    <button @click="changeCar">修改汽车</button>
    <br/>
    <h2>当前求和：{{ sum }}</h2>
    <button @click="changeSum">点击sum+1</button>
  </div>
</template>

<script setup lang="ts" name="Person">
    import { ref,reactive } from 'vue'
   //数据
   let car = reactive({brand:'BYD',price:10})
   let sum = ref(0)
   //方法
   function changeCarPrice() {
       car.price += 10
   }
   function changeCar() {
       // reactive分配一个新的对象会失去响应式
       // car = {brand:'aotuo',price:100}这么写页面不会更新
       // car = reactive({brand:'aotuo',price:100})这么写页面不会更新

       // 下面的写法页面可以更新
       Object.assign(car,{brand:'aotuo',price:100})//相当于批量修改car的属性，与ref的修改不同
   }
   function changeSum() {
       sum.value += 1
   }
</script>
<style scoped>
.person {
    /* 背景颜色 */
    background-color: skyblue;
    /* 阴影 */
    box-shadow: 0 0px 10px;
    /* 圆角 */
    border-radius: 4px;
    padding: 20px; /* 内边距 */
}
button { 
    margin: 0 5px;
}
</style>


